<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音乐播放页面</title>
<link href="../css/musicplay.css" type="text/css" rel="stylesheet" />
<script src="../js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/musicControl.js"></script>
</head>
<body>
<!-- 这部分传进来的时候需要传参数,用ajax局部去刷新播放列表 -->
<body>
	<!-- 外层盒子区域 -->
	<div class="box">
		<!-- 上部分 -->
		<div id="top">
			<!-- 左半部分显示播放的列表 -->
			<div id="left">
				<!-- 头部几个功能模块 -->
				<ul class="header">
					<li id='collection'><a href="#">收藏</a></li>
					<li id='start'><a href="#">播放</a></li>
					<li id='download'><a href="#">下载</a></li>
					<li id='remove'><a href="#">删除</a></li>
					<li id='clear'><a href="#">清空</a></li>
				</ul>
				<!-- 播放列表部分 -->
				<ul class="playList">
					<li class="first">
						<input type="checkbox" class="chb" id="all" />
						<div class="song">
							<span> </span> 歌曲
						</div> <span class="music">歌手</span> <span class="time">时长</span>
					</li>
					<!-- 这部分放用户实际添加的数据 -->
				</ul>
			</div>
			<!-- 右边部分显示歌词的显示 -->
			<div id="right">
				<div class="myimg">
					<img src="../images/p1.jpg" height="188" id="myimg" />
				</div>
				<div class="lrc">
					<!--用来存放实质的内容-->
					<div class="mycon"></div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div id="bottom">
			<div class="control flex">
				<a href="#" class="prev" title="上一首"></a>
				<a href="#" class="play" id="btnplay" title="播放/暂停"><img src="../images/play.png" /></a> 
				<a href="#" class="next" title="下一首"></a>
			</div>
			<div class="music">
				<div class="head">
					<div class="musicinfo" id="sim_song_info"></div>
					<!-- 作者信息 -->
					<div class="musictime" id="time_show"></div>
					<!-- 播放时间 -->
				</div>
				<div class="progress" id="progress">
					<!-- 进度条 -->
					<div class="inner" id="bgbar"></div>
					<div class="outer" id="bar"></div>
				</div>
			</div>
			<div class="playmodel">
				<div class="playorder" id="play_mod" title="顺序播放">
					<img src="../images/shunxu.png"/>
				</div>
				<div class="download" title="下载"></div>
				<a href="#" class="collection " title="收藏"></a> 
				<div id="voice">
					<!-- 播放声音部分 -->
					<div class="voice" id="mute" title="声音">
						<img src="../images/voiceon.png" />
					</div>
					<div class="vociebar" id="volume" title="调节音量">
						<div class="inner" id="spanvolumebar"></div>
						<div class="outer" id="bgbars"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--播放器-->
	<audio id="mymusic"></audio>
</body> 
</html>